<template>
	<!-- //顶部筛选功能 -->
	<view class="top-box">
		<view class="select-box">
			<!-- //城市选择 -->
			<picker class="city-pick" :range="locations" @change="onLocationChange" :value="index">
				<view>
					{{locations[index]}}
					<image class="pick-img" src="../../static/down.png"></image>
				</view>
			</picker>
			<!-- //时间选择 -->
			<view class="example-body">
				<uni-datetime-picker mode="date" :range="getRange()" :start="start" :end="end" :border="false"
					v-model="range" type="daterange" @change="maskClick" />
			</view>
			<!-- //输入搜索 -->
			<view class="search-box">
				<input v-model="keyword1" type="text" placeholder="搜索民宿/关键词">
			</view>
			<!-- <view v-if="history.length > 0">
			      <view v-for="(item, index) in history " :key="index">{{ item }}</view>
			      <button @click="clearHistory">清空搜索历史</button>
			    </view> -->
			<!-- //查询 -->
			<view class="conforim-box">
				<button class="button-btn" @click="search">查询民宿</button>
			</view>

		</view>
	</view>
	<!-- //广告轮播图 -->
	<view class="gg-swiper" style="overflow: hidden;">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="1000">
			<swiper-item v-for="(item,i) in img">
				<view class="swiper-item">
					<image :src="item.url" class="gg-img"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
	<!-- //民宿展示模块 -->
	<view class="minsu-box">
		<view class="minsu-title">热门推荐</view>
		<view class="minsu-list" v-for="(item, index) in filteredList" :key="index">
			<view class="list-img-box">
				<image class="list-img" :src="$Config.HOST + '/public' + item.thumb">
				</image>
				<view class="list-text-box">
					<view class="minsu-dw-box">
						<image class="minsu-dw" src="../../static/dw.png"></image>
					</view>
					<view class="position-name">{{item.position}}.{{item.name}}</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [
				], //民宿列表
				keyword1: '', //输入框输入内容
				locations: [], //地点数组
				selectedLocation: '', //当前选择地点
				filteredList: [], //热门推荐民宿列表
				index: 0, //选择城市值下标
				range: ['', ''], //当前选择时间范围
				start: Date.now(), //开始选择时间起始时间
				end: Date.now() + 1000000000000, //结束选择时间
				img: [{
					name: '广告1',
					url: '../../static/gg1.png'
				}, {
					name: '广告2',
					url: '../../static/gg1.png'
				}, {
					name: '广告3',
					url: '../../static/gg1.png'
				}],
				 history:[]//广告数组
			};
		},
		onLoad() {
			let that = this;
			uni.request({
				url:'http://village.yqxbxb.com/api/villages/minsu?id=1',
				method:'GET',
				success(res) {
					console.log(res);
					that.list = res.data.data.data
					that.filteredList = res.data.data.data;
					let arr = [];
					arr = res.data.data.data
					for (let i in arr) {
						that.locations.push(arr[i].position)
					}
				}
			})
		},
		methods: {
			//时间范围选择rang方法
			getRange() {
				const currentDate = new Date();
				const nextMonthDate = new Date();
				nextMonthDate.setMonth(currentDate.getMonth() + 1);
				return [currentDate.getTime(), nextMonthDate.getTime()];
			},
			//城市选择事件
			onLocationChange(event) {
				console.log(this.locations[event.detail.value])
				this.index = event.detail.value;
				this.selectedLocation = this.locations[event.detail.value]
			},
			
			//查询方法，通过地点和城市查找
			search() {
				
				 
				this.filteredList = this.list.filter(item => {
					return item.name.includes(this.keyword1) && item.position.includes(this.selectedLocation);
				});
				if (this.filteredList.length === 0) {
					this.keyword1 = '';
				        uni.showToast({
				        	title: '没有结果，请重新查询',
				        	icon: 'none',
				        })
				      } else {
				       uni.showToast({
				       	title: '查询成功',
				       	icon: 'none'
				       });
				 
				  this.history.unshift(this.keyword1);
				       // 清空搜索框
				       this.keyword1 = '';
				 
			}
			},
			// 	  clearHistory() {
			// 	      // 清空搜索历史
			// 	      this.history = [];
			// 	    },
			// Downhistory(){
			// 	 this.history = uni.getStorageSync('keyword1') || [];
			// 	  console.log(this.history)
			// },
			//当用户取消搜索时，热门推荐恢复初始值
			returnlist() {
				this.filteredList = this.list
				this.keyword1 = ''
			},
			maskClick() {
				console.log(this.range)
			},
			//获取当前用户定位
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.createMapContext('map').reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: (res) => {
								const address = res.result.address;
								console.log('用户地址信息：', address);
							},
							fail: (error) => {
								console.log('获取位置名称失败：' + error.message);
							}
						});
					},
					fail: (error) => {
						console.log('获取位置失败：' + error.message);
					}
				});
			}
		}
	};
</script>

<style>

	.top-box {
		display: flex;
		justify-content: center;

		width: 100%;
		height: 630rpx;
		background-image: url('../../static/bg1.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.select-box {
		width: 650rpx;
		height: 400rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 140rpx;
		background-color: white;
	}

	.city-pick {
		height: 80rpx;
		width: 90%;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		border-bottom: 4rpx solid #a1a1a1;
	}

	.pick-img {
		width: 40rpx;
		height: 20rpx;
		margin-left: 10rpx;

	}

	.example-body {
		height: 80rpx;
		width: 90%;
		border-bottom: 4rpx solid #a1a1a1;
	}

	.search-box {
		height: 80rpx;
		width: 90%;
		display: flex;
		align-items: center;
		border-bottom: 4rpx solid #a1a1a1;
	}

	.conforim-box {
		height: 80rpx;
		width: 90%;
		display: flex;
		align-items: center;
	}

	.button-btn {
		background-color: #b8ffb8;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.swiper {
		margin-top: 20rpx;
		height: 200rpx;
		overflow: hidden;
	}

	.swiper-item {
		overflow: hidden;
		margin: 0 auto;
		display: block;
		width: 90%;
		border-radius: 15rpx;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
	}

	.gg-img {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.minsu-box {
		margin: 0 auto;
		width: 90%;

		display: flex;
		justify-content: center;

		flex-wrap: wrap;
	}

	.minsu-title {
		margin-top: 10rpx;
		width: 100%;
		height: 40rpx;

		text-align: left;
	}

	.minsu-list {
		width: 320rpx;
		height: 300rpx;
		margin-top: 20rpx;
		margin-right: 15rpx;

	}

	.list-img {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.list-img-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.list-text-box {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		margin-top: 230rpx;
		position: absolute;

	}

	.minsu-dw-box {
		width: 30rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.minsu-dw {
		width: 100%;
		height: 90%;
	}

	.position-name {
		margin-left: 10rpx;
		color: white;
		font-size: 24rpx;
	}
</style>